const { body } = document
const WIDTH = 992 // 参考Bootstrap响应式设计

export default {
    data() {
        return {}
    },
    watch: {},
    beforeMount() {
        window.addEventListener('resize', this.$_resizeHandler)
    },
    beforeUnmount() {
        window.removeEventListener('resize', this.$_resizeHandler)
    },
    mounted() {
        const isMobile = this.$_isMobile()
        if (isMobile) {
            this.$store.dispatch('customMenu/toggleDevice', 'mobile')
        }
    },
    methods: {
        $_isMobile() {
            const rect = body.getBoundingClientRect()
            return rect.width - 1 < WIDTH
        },
        $_resizeHandler() {
            if (!document.hidden) {
                const isMobile = this.$_isMobile()
                this.$store.dispatch('customMenu/toggleDevice', isMobile ? 'mobile' : 'desktop')
            }
        }
    }
}